<template>
  <div>
    <div
      v-if="messageObj.role === 'assistant'"
      style="
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 5px;
      "
    >
      <div class="message-ai">
        <div style="width: 100%; display: flex; align-items: flex-start">
          <img src="/icon/bot2.gif" style="width: 40px; margin-right: 10px" />
          <div class="message-item-ai">
            <MarkdownRenderer :source="messageObj.content" />
            <div style="display: flex; justify-content: right; margin-top: 6px">
              <div
                @click="collection(messageObj)"
                style="margin-left: 14px; display: flex; align-items: center; cursor: pointer"
              >
                <img src="/icon/collection.svg" style="width: 20px" />
                <div>收藏</div>
              </div>
              <div
                @click="copyMsg(messageObj)"
                style="margin-left: 8px; display: flex; align-items: center; cursor: pointer"
              >
                <img src="/icon/copy.svg" style="width: 24px" />
                <div>复制</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else style="padding: 5px; display: flex; justify-content: right">
      <div class="message-user">
        <MarkdownRenderer :source="messageObj.content" />
        <div style="display: flex; justify-content: right">
          <div
            @click="collection(messageObj)"
            style="margin-left: 14px; display: flex; align-items: center; cursor: pointer"
          >
            <img src="/icon/collection-white.svg" style="width: 20px" />
            <div>收藏</div>
          </div>
          <div
            @click="copyMsg(messageObj)"
            style="margin-left: 8px; display: flex; align-items: center; cursor: pointer"
          >
            <img src="/icon/copy-white.svg" style="width: 24px; margin-right: 5px" />
            <div>复制</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Http from '@/api/http'
import MarkdownRenderer from '@/views/component/MarkdownRenderer.vue'
import { message } from 'ant-design-vue'
import copy from 'copy-to-clipboard'
import { onMounted, ref, watch } from 'vue'

const props = defineProps({
  icon: {
    default() {
      return 'bot.svg'
    }
  },
  isLast: {
    type: Boolean
  },
  loading: {
    type: Boolean
  },
  message: {
    type: Object,
    default() {
      return {}
    }
  }
})

const messageObj = ref({})

const copyMsg = (data) => {
  copy(data.content)
  message.success('已复制')
}

const collection = (data) => {
  Http.post('/api/collection/submit', {
    chatId: data.id,
    content: data.content
  }).then(() => {
    message.success('收藏成功')
  })
}

onMounted(async () => {
  messageObj.value = props.message
  watch(
    () => props.message,
    () => {
      messageObj.value = props.message
    }
  )
})
</script>

<style>
.message-ai {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: left;
  border-radius: 6px;
}

.message-user {
  max-width: 80%;
  min-width: 100px;
  display: flex;
  flex-direction: column;
  color: #ffffff;
  background-color: #6f8dfa;
  border-radius: 6px;
  overflow: hidden;
  padding: 12px;
}

.message-item-ai {
  min-width: 600px;
  max-width: 80%;
  padding: 12px;
  border-radius: 6px;
  background-color: #f0f6fd;
}

.ai-avatar {
  width: 30px;
  margin-right: 5px;
}

.ai-avatar:hover {
  cursor: pointer;
}
</style>
